<template>
  <div class="app-index">
    <!-- 添加或修改用户配置对话框 -->
    <div v-if="open"
         class="editdata">
      <p class="back"><span class="el-icon-arrow-left"
              @click="goBack">返回</span> / <span>编辑</span></p>

      <el-form ref="form"
               :model="form"
               :rules="rules"
               label-width="100px">
        <div class="editbox">
          <h3>{{title}}</h3>
          <el-row>
            <el-col :span="8">
              <el-form-item label="注册角色"
                            prop="roleType">
                <el-select style="width: 240px"
                           v-model="form.roleType"
                           placeholder="请选择注册角色">
                  <el-option v-for="dict in dict.type.sys_role_type"
                             :key="dict.value"
                             :label="dict.label"
                             :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户姓名"
                            prop="nickName">
                <el-input v-model="form.nickName"
                          placeholder="请输入客户姓名"
                          style="width: 240px"
                          maxlength="30" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作单位"
                            prop="deptName">
                <el-input v-model="form.deptName"
                          placeholder="请输入工作单位"
                          style="width: 240px"
                          maxlength="30" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8"
                    v-if="form.registerType==1">
              <el-form-item label="手机号码"
                            prop="phonenumber">
                <el-input v-model="form.phonenumber"
                          placeholder="请输入手机号码"
                          style="width: 240px"
                          maxlength="11" />
              </el-form-item>
            </el-col>
            <el-col :span="8"
                    v-if="form.registerType==2">
              <el-form-item label="手机号码">
                <el-input v-model="form.phonenumber"
                          placeholder="请输入手机号码"
                          style="width: 240px"
                          maxlength="11" />
              </el-form-item>
            </el-col>
            <el-col :span="8"
                    v-if="form.registerType==2">
              <el-form-item label="邮箱"
                            prop="email">
                <el-input v-model="form.email"
                          placeholder="请输入邮箱"
                          style="width: 240px"
                          maxlength="30" />
              </el-form-item>
            </el-col>
            <el-col :span="8"
                    v-if="form.registerType==1">
              <el-form-item label="邮箱">
                <el-input v-model="form.email"
                          placeholder="请输入邮箱"
                          style="width: 240px"
                          maxlength="30" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="注册时间"
                            prop="createTime">
                <el-input v-model="form.createTime"
                          maxlength="30"
                          style="width: 240px"
                          readOnly />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="审核状态">
                <el-select v-model="form.auditStatus"
                           style="width: 240px">
                  <el-option v-for="dict in dict.type.sys_audit_status"
                             :key="dict.value"
                             :label="dict.label"
                             :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态">
                <template slot-scope="scope">
                  <el-switch v-model="form.status"
                             active-value="0"
                             inactive-value="1"
                             @change="handleStatusChange(form)"></el-switch>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最后登录时间">
                <el-input v-model="form.createTime"
                          style="width: 240px"
                          maxlength="30"
                          readOnly />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="设置上级">
                <el-select v-model="form.superiorIds"
                           multiple
                           filterable
                           style="width: 240px">
                  <el-option v-for="dict in superiorOptions"
                             :key="dict.userId"
                             :label="dict.nickName"
                             :value="dict.userId"></el-option>
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="归属部门"
                            prop="deptId">
                <treeselect v-model="form.deptId"
                            style="width: 240px"
                            :options="deptOptions"
                            :show-count="true"
                            placeholder="请选择归属部门" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="角色"
                            prop="roleIds">
                <el-select v-model="form.roleIds"
                           multiple
                           style="width: 240px"
                           placeholder="请选择角色">
                  <el-option v-for="item in roleOptions"
                             :key="item.roleId"
                             :label="item.roleName"
                             :value="item.roleId"
                             :disabled="item.status == 1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="editbox editfooter">

          <span @click="cancel"
                class="cancel btn">取消</span>
          <span type="primary"
                @click="submitForm"
                class="save btn">保存</span>


        </div>

      </el-form>
    </div>

    <div v-if="!open"
         class="body">
      <el-row :gutter="20"
              class="User"
              style="margin: 0;">
        <div class="userTop">
          <h3>用户</h3>
          <el-button type="text"
                     class="text"
                     @click="reload()">刷新</el-button>
        </div>
        <div class="legend">
          <div class="userTotal">
            <img src="@/assets/images/index/user1.png"
                 alt="" />
            <div class="right">
              <span>用户总人数(人)</span>
              <p>{{countCustom.totalNum}}</p>
            </div>
          </div>

          <div class="pass">
            <img src="@/assets/images/index/padding1.png"
                 alt="" />
            <div class="right">
              <span>审核通过</span>
              <p>{{countCustom.passNum}}</p>
            </div>
          </div>
          <div class="nopass">
            <img src="@/assets/images/index/nopass1.png"
                 alt="" />
            <div class="right">
              <span>审核不通过</span>
              <p>{{countCustom.unPassNum}}</p>
            </div>
          </div>
          <div class="padding">
            <img src="@/assets/images/index/padding1.png"
                 alt="" />
            <div class="right">
              <span>待审核</span>
              <p>{{countCustom.passingNum}}</p>
            </div>
          </div>
          <div class="line">
            <img src="@/assets/images/index/user1.png"
                 alt="" />
            <div class="right">
              <span>在线</span>
              <p>{{countCustom.onlineNum}}</p>
            </div>
          </div>
        </div>
      </el-row>
      <el-row :gutter="20"
              style="margin: 16px 0; display: flex">
        <el-col :span="14"
                class="leave">
          <h3>留言</h3>
          <div class="leaveword">
            <div class="sample">
              <img src="@/assets/images/index/total.png"
                   alt="" />
              <div class="mesrig">
                <span>留言总数</span>
                <p>{{countMessage.totalNum}}</p>
              </div>
            </div>
            <div class="sample">
              <img src="@/assets/images/index/loading.png"
                   alt="" />
              <div class="mesrig">
                <span>处理中</span>
                <p>{{countMessage.dealingNum}}</p>
              </div>
            </div>
            <div class="sample">
              <img src="@/assets/images/index/finsh.png"
                   alt="" />
              <div class="mesrig">
                <span>已处理</span>
                <p>{{countMessage.dealedNum}}</p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="10"
                class="rigleave">
          <div class="paddmsg">
            <h3>待回复留言</h3>
            <div class="el-icon-arrow-right"
                 @click="goback"></div>
          </div>
          <ul class="leavelist">
            <li v-for="(item,index) in unDealMessageList">
              <el-tag @click="goLeave(item)">留言</el-tag>
              <p>用户{{item.nickName}}于{{item.messageTime}}提交了留言，请及时回复。</p>
            </li>

          </ul>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :sm="24"
                :lg="24">
          <el-card class="update-log">
            <div slot="header"
                 class="clearfix">
              <h3>待审核用户</h3>
            </div>
            <div class="body">
              <el-col :span="24"
                      :xs="24">
                <el-table :data="userList"
                          @selection-change="handleSelectionChange">
                  <el-table-column label="用户编号"
                                   align="center"
                                   key="userId"
                                   prop="userId"
                                   v-if="columns[0].visible" />
                  <el-table-column label="用户姓名"
                                   align="center"
                                   key="nickName"
                                   prop="nickName"
                                   v-if="columns[1].visible"
                                   :show-overflow-tooltip="true" />
                  <el-table-column label="角色"
                                   align="center"
                                   prop="roleType"
                                   v-if="columns[2].visible"
                                   :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.sys_role_type"
                                :value="scope.row.roleType" />
                    </template>
                  </el-table-column>
                  <el-table-column label="工作单位"
                                   align="center"
                                   key="deptName"
                                   prop="deptName"
                                   v-if="columns[3].visible"
                                   :show-overflow-tooltip="true" />
                  <el-table-column label="手机号码"
                                   align="center"
                                   key="phonenumber"
                                   prop="phonenumber"
                                   v-if="columns[4].visible"
                                   :show-overflow-tooltip="true" />
                  <el-table-column label="邮箱"
                                   align="center"
                                   key="email"
                                   prop="email"
                                   show-overflow-tooltip
                                   v-if="columns[5].visible"
                                   width="120" />
                  <el-table-column label="注册时间"
                                   align="center"
                                   key="createTime"
                                   prop="createTime"
                                   v-if="columns[6].visible"
                                   width="160" />

                  <el-table-column label="审核状态"
                                   align="center"
                                   prop="auditStatus"
                                   v-if="columns[7].visible"
                                   :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.sys_audit_status"
                                :value="scope.row.auditStatus" />
                    </template>
                  </el-table-column>

                  <el-table-column label="状态"
                                   align="center"
                                   key="status"
                                   v-if="columns[8].visible">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.status"
                                 active-value="0"
                                 inactive-value="1"
                                 @change="handleStatusChange(scope.row)"
                                 :disabled="scope.row.status==1"></el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作"
                                   align="center"
                                   width="160"
                                   class-name="small-padding fixed-width">
                    <template slot-scope="scope"
                              v-if="scope.row.userId !== 1">
                      <el-button size="mini"
                                 type="text"
                                 icon="el-icon-edit"
                                 @click="handleUpdate(scope.row)"
                                 v-hasPermi="['system:custom:edit']">修改</el-button>
                      <el-button size="mini"
                                 type="text"
                                 icon="el-icon-delete"
                                 @click="handleAudit(scope.row)"
                                 v-hasPermi="['system:custom:audit']">审核</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination v-show="total>0"
                            :total="total"
                            :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize"
                            @pagination="getList" />
              </el-col>
            </div>
          </el-card>
        </el-col>

      </el-row>
    </div>

    <!-- 审核    -->
    <el-dialog :title="auditForm.title"
               :visible.sync="auditForm.open"
               width="80%"
               append-to-body>
      <el-form ref="auditForm"
               :model="auditForm"
               :rules="listAuditRules"
               label-width="80px">

        <el-row>
          <el-col :span="12">
            <el-form-item>
              <el-radio-group v-model="auditForm.auditStatus">
                <el-radio v-for="dict in dict.type.sys_audit_status"
                          v-if="dict.value!= '0'"
                          :key="dict.value"
                          :label="dict.value">{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="auditForm.auditStatus == 1">
          <el-col :span="8">
            <el-form-item label="归属部门"
                          prop="deptId">
              <treeselect v-model="auditForm.deptId"
                          style="width: 240px"
                          :options="deptOptions"
                          :show-count="true"
                          placeholder="请选择归属部门" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="角色"
                          prop="roleIds">
              <el-select v-model="auditForm.roleIds"
                         multiple
                         style="width: 240px"
                         placeholder="请选择角色">
                <el-option v-for="item in roleOptions"
                           :key="item.roleId"
                           :label="item.roleName"
                           :value="item.roleId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="auditSubmitForm">确 定</el-button>
        <el-button @click="auditCancel">取 消</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>

import {
  unAuditStatuslist,
  getCustom,
  auditCustom,
  updateCustom,
  isRegisterUserlist,
  changeCustomStatus
} from '@/api/system/custom'
import { countCustom, countMessage, getUnDealMessage } from '@/api/home'
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";


export default {
  name: "Index",
  dicts: [
    "sys_normal_disable",
    "sys_user_sex",
    "sys_role_type",
    "sys_audit_status",
  ],
  components: { Treeselect },
  data () {
    return {
      superiorOptions: [],
      // 部门树选项
      deptOptions: [],
      // 角色选项
      roleOptions: [],
      // 版本号
      version: "3.8.5",
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: "",
      // 表单参数
      form: {},
      // 用户审核参数
      auditForm: {
        // 是否显示弹出层（客户导入）
        open: false,
        // 弹出层标题（客户导入）
        title: "",
        auditStatus: "1", //默认显示通过
        userId: "",
        deptId: "",
        roleIds: []
      },


      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: 1,
        //默认已注册用户
        isRegister: 1,
        auditStatus: 0,
      },
      // 列信息
      columns: [
        { key: 0, label: `用户编号`, visible: true },
        { key: 1, label: `用户姓名`, visible: true },
        { key: 2, label: `角色`, visible: true },
        { key: 3, label: `工作单位`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `邮箱`, visible: true },
        { key: 6, label: `注册时间`, visible: true },
        { key: 7, label: `审核状态`, visible: true },
        { key: 8, label: `状态`, visible: true },
      ],

      countCustom: {},
      // 表单校验
      rules: {
        roleType: { required: true, message: "注册角色不能为空", trigger: "blur" },
        nickName: [
          { required: true, message: "客户姓名不能为空", trigger: "blur" }
        ],
        deptName: [
          { required: true, message: "工作单位不能为空", trigger: "blur" }
        ],
        email: [
          {
            required: true,
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      },

      listAuditRules: {
        deptId: [
          { required: true, message: "请选择部门", trigger: "blur" }
        ],
        roleIds: [
          { required: true, message: "请选择角色", trigger: "blur" }
        ],
      },

      countMessage: {},

      unDealMessageList: [],
    };
  },

  created () {
    this.getList();
    this.getDeptTree();
    this.getCountCustom();
    this.getCountMessage();
    this.getUnDealMessage();
  },

  methods: {
    goLeave (item) {
      this.$router.push({
        path: "/operate/message",
        query: { id: item.id },
      })
    },
    goback () {
      this.$router.push('/operate/message')
    },
    // 客户状态修改
    handleStatusChange (row) {
      var isRegister = row.isRegister;
      var userName = row.userName;
      if (isRegister && isRegister == '1') {
        var registerType = row.registerType;
        if (registerType == "1") { //手机注册
          userName = row.phonenumber;
        } else if (registerType == "2") {
          userName = row.email;
        }
      }

      let text = row.status === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + userName + '"客户吗？').then(function () {
        return changeCustomStatus(row.userId, row.status);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function () {
        row.status = row.status === "0" ? "1" : "0";
      });
    },

    /** 查询部门下拉树结构 */
    getDeptTree () {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },

    //获取所有已审核已注册的客户id（除了当前点击的用户）
    getSuperior () {
      var form = {};
      form.auditStatus = 1;
      form.userId = this.form.userId;
      isRegisterUserlist(form).then(response => {
        if (response.code == '200' && response.data) {
          this.superiorOptions = response.data
        }
      });
    },


    reload () {
      this.getList();
      this.getCountCustom();
      this.getCountMessage();
    },
    auditCancel () {
      this.auditForm.open = false;
      this.reset();
      if (this.redirect) {
        this.$router.push(this.redirect)
      }
    },


    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.userId != undefined) {
            updateCustom(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              if (this.redirect) {
                this.$router.push(this.redirect)
              }
              this.getList();
            });
          } else {
            addCustom(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              if (this.redirect) {
                this.$router.push(this.redirect)
              }
              this.getList();
            });
          }
        }
      });
    },

    cancel () {
      this.open = false;
      this.reset();
      if (this.redirect) {
        this.$router.push(this.redirect)
      }
    },

    getUnDealMessage () {
      getUnDealMessage().then((response) => {
        this.unDealMessageList = response.data;
      });
    },

    getCountCustom () {
      countCustom().then((response) => {
        this.countCustom = response.data;
      });
    },

    getCountMessage () {
      countMessage().then((response) => {
        this.countMessage = response.data;
      });
    },

    goBack () {
      this.open = false
    },
    reset () {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: []
      };
      this.resetForm("form");
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      const userId = row.userId || this.ids;
      getCustom(userId).then(response => {
        this.form = response.data;
        this.$set(this.form, "superiorIds", response.data.superiorIds);
        this.roleOptions = response.roles;
        this.$set(this.form, "roleIds", response.roleIds);
        this.open = true;
        this.title = "修改客户";
        this.userId = response.data.userId;
      });
      this.getSuperior();
    },

    /** 审核按钮操作 */
    handleAudit (row) {
      this.getDeptTree();
      this.auditForm.title = "审核";
      this.auditForm.deptId = null;
      this.auditForm.open = true;
      var userId = row.userId;
      this.auditForm.userId = userId;
      getCustom(userId).then(response => {
        this.roleOptions = response.roles;
        this.$set(this.auditForm, "roleIds", response.roleIds);
        this.userId = response.data.userId;
        this.auditForm.auditStatus = '1';
        this.auditForm.isRegister = response.data.isRegister
        this.auditForm.registerType = response.data.registerType
      });
    },


    /**审核提交按钮*/
    auditSubmitForm: function () {
      this.$refs["auditForm"].validate(valid => {
        if (valid) {
          auditCustom(this.auditForm).then(response => {
            this.$modal.msgSuccess("审核成功");
            setTimeout(() => {
              this.auditForm.open = false;
              this.open = false;
              this.getList();
              this.getCountCustom();
            }, 1000);
          });
        }
      })
    },

    goTarget (href) {
      window.open(href, "_blank");
    },

    getList () {
      unAuditStatuslist(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.userList = response.rows;
          this.total = response.total;
        }
      );
    },

    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
  },
};
</script>


<style scoped lang="scss">
.app-index {
  background-color: none;
  overflow: hidden;
  .editdata {
    width: 100%;
    height: 89vh;
    background: #f2f3f4;
    border-radius: 0px 0px 0px 0px;
    padding: 1px 20px;
    box-sizing: border-box;
    // 面包屑样式
    .back {
      .el-icon-arrow-left {
        color: #979797;
        cursor: pointer;
      }
      span {
        font-size: 14px;
        font-family: Source Code Pro-Regular, Source Code Pro;
        font-weight: 400;
        color: #1f2329;
        line-height: 22px;
      }
    }
    // form表单样式
    .editbox {
      padding: 20px;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0px 4px 12px 0px rgba(211, 211, 211, 0.25);
      border-radius: 6px 6px 6px 6px;
    }
    .editfooter {
      margin-top: 20px;
      > div {
        display: flex;
        padding-bottom: 44px;
        .footbox {
          width: 150px;
          height: 96px;
          background: #f7f8fa;
          border-radius: 4px 4px 4px 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20px;
          position: relative;
          cursor: pointer;
          img {
            width: 23px;
            height: 24px;
          }
          .icon_box {
            width: 16px;
            height: 16px;
            position: absolute;
            right: 10px;
            top: 10px;
          }
        }
      }
    }
  }
  h3 {
    font-family: Source Code Pro-Bold, Source Code Pro;
    font-weight: bold;
    color: #1f2329;
    line-height: 24px;
    // margin: 0 0 20px 0;
    padding: 0;
    margin: 10px 10px;
  }
  .body {
    // background: #f3f2f6;
    .User {
      background-color: #fff;
      border-radius: 15px;
      box-shadow: 0px 4px 12px 0px rgba(211, 211, 211, 0.25);

      .userTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;

        ::v-deep.text {
          font-size: 14px;
          color: #c08eb7;
        }
      }
    }
    h3 {
      font-weight: 800;
    }
    .legend {
      width: 100%;
      display: flex;
      align-items: center;
      height: 100%;
      // padding-left: 35px;
      padding-bottom: 36px;
      justify-content: space-around;
      .userTotal {
        width: 187px;
        height: 92px;
        background: url("../assets/images/index/user.png") no-repeat;
        background-size: cover;
        display: flex;
      }
      .right {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        padding-top: 40px;
        span {
          display: block;
          font-size: 14px;
          font-weight: 400;
        }
        p {
          font-size: 26px;
          font-weight: bold;
          margin-top: 0;
        }
        img {
          width: 62px;
          height: 72px;
        }
      }
      .pass {
        width: 187px;
        height: 92px;
        background: url("../assets/images/index/pass.png") no-repeat;
        background-size: cover;
        display: flex;
      }
      .nopass {
        width: 187px;
        height: 92px;
        background: url("../assets/images/index/nopass.png") no-repeat;
        background-size: cover;
        display: flex;
      }
      .padding {
        width: 187px;
        height: 92px;
        background: url("../assets/images/index/padding.png") no-repeat;
        background-size: cover;
        display: flex;
      }
      .line {
        width: 187px;
        height: 92px;
        background: url("../assets/images/index/line.png") no-repeat;
        background-size: cover;
        display: flex;
      }
    }
    //
    ::v-deep.leave {
      // width: 687px;
      height: 200px;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      box-shadow: 0px 4px 12px 0px rgba(211, 211, 211, 0.25);
      border-radius: 12px;
    }
    .mesrig {
      display: flex;
      flex-direction: column;
      text-align: left;
    }
    .leaveword {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      box-sizing: border-box;
      margin-right: 70px;
    }
    .sample {
      width: 120px;
      height: 80px;
      display: flex;
      justify-content: space-around;
      margin-left: 0;
      img {
        width: 46px;
        height: 46px;
      }
    }
    span {
      display: block;
      font-size: 12px;
    }
    p {
      font-size: 30px;
      font-weight: bold;
      color: #141414;
      margin: 0;
    }
    .rigleave {
      // width: 462px;
      height: 200px;
      background-color: #fff;
      box-shadow: 0px 4px 12px 0px rgba(211, 211, 211, 0.25);
      border-radius: 12px;
      margin-left: 20px;
      .paddmsg {
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .el-icon-arrow-right {
        color: #aa2290;
        cursor: pointer;
      }

      .leavelist {
        height: 150px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding-left: 0px;
        overflow: auto;
        margin-top: 0;
        .el-tag {
          cursor: pointer;
        }
        li {
          display: flex;
          list-style: none;
          align-items: center;
          margin-bottom: 10px;
        }
        span {
          display: block;
          width: 40px;
          height: 24px;
          line-height: 24px;
          font-size: 12px;
          text-align: center;
          background: #ffeefc;
          border: radius 2px;
          color: #aa2290;
          opacity: 1;
        }
        p {
          font-size: 14px;
          font-weight: normal;
          margin-left: 10px;
        }
      }
    }
    ::v-deep.sta {
      background-color: #ffeefc;
      color: #aa2290;
      border-radius: 5px;
    }
    .update-log {
      border-radius: 12px;
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
    // .clearfix {
    //   width: 1057px;
    //   display: flex;
    //   justify-content: space-between;
    //   align-items: center;
    // }
    ::v-deep.el-switch.is-checked .el-switch__core {
      border-color: #aa2290;
      background-color: #aa2290;
    }
    ::v-deep.el-pagination {
      display: flex;
      justify-content: end;
      // position:relative;
      // left: 920px;
      // right: 10px;
    }
    .el-card {
      display: flex;
      flex-direction: column;
      // height: 327px;
      // position: relative;
    }
    .el-table {
      margin-bottom: 10px;
    }
  }

  // 取消保存审核公用样式----后有需要 可差离出去
  .btn {
    display: inline-block;
    width: 80px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin-right: 20px;
    cursor: pointer;
  }
  .cancel {
    background: #e6ebf0;
    border-radius: 2px 2px 2px 2px;
  }
  .save {
    background: #0b9eae;
    color: #ffffff;
    border-radius: 2px 2px 2px 2px;
  }
  .examine {
    width: 161px;
    background: #aa2290;
    color: #ffffff;
    border-radius: 4px 4px 4px 4px;
  }

  ::v-deep.el-card__header {
    padding: 0;
    border-bottom: none;
    h3 {
      margin-left: 21px;
      margin-top: 18px;
    }
  }
}
</style>


